<template>
    <div class="RobotContent">
        <van-floating-bubble
            v-model:offset="state.offset"
            teleport="body"
            axis="xy"
            icon=""
            magnetic="x"
            :gap="0"
            @offset-change="onOffsetChange"
            @click.stop="RobotTap"
            style="border-radius: 0;background: transparent;"
        >
            <div class="van-floating-bubble-home">
                <SvgIcon width="40px" height="40px" name="hamburg" color="#f5c3cb"></SvgIcon>
            </div>
        </van-floating-bubble>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showNotify, showToast, showConfirmDialog } from 'vant';
import { getWeek, getTime, times, whatTime } from '@/utils/plugins'
import useSettingStore from '@/store/modules/setting'

const settings = useSettingStore()

const props = defineProps({
    Robot: {
        type: Number,
        default: 50
    },
})

const route = useRoute()
const router = useRouter()

const emit = defineEmits(['RobotTap'])

const RobotTap = () => {
    emit('RobotTap', getNow())
}

const getNow = () => {
    const now = getTime()
    return(`现在是：北京时间${now}${getWeek()}${whatTime()}${times('24')}`)
}

const offsetX = document.documentElement.clientWidth || window.innerWidth
const state = reactive({
    offset: {
        x: offsetX - 35,
        y: 400
    }
});
const flag = ref<number>(1)

const onOffsetChange = (offset) => {
    // showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
    if (flag.value == 0) {
        return false
    }
    // showToast('需要帮助吗？点击我试试');
    showToast('点击我试试');
    flag.value-- 
}


onMounted(() => {
    // settings.handlerHeaderShow(false)
    nextTick(() => {
        
    })
})

onBeforeUnmount(() => {
    // settings.handlerHeaderShow(true)
})

</script>


<style lang="scss" scoped>
.RobotContent {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    // background: transparent;

}
</style>